<template>
  <!-- 头部 -->
  <div class="header">
    <div class="inner">
      <div class="erweima"></div>
      <div class="input">
        <input type="text" v-model="inputData" @keyup="search" placeholder="百草味零食" />
        <div class="search" v-show="searchFlag"></div>
        <div class="subim-search" v-show="submitFlag"></div>
      </div>
      <div class="message"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      submitFlag: false,
      searchFlag: true,
      inputData: "",
      active: 0
    };
  },
  methods: {
    //   头部搜索 出现
    search() {
      //如果长度为0显示首页主页面
      if (this.inputData.length == 0) {
        this.submitFlag = false;
        this.searchFlag = true;
        // 传值给父组件 显示首页主页面
        this.$emit("getContentShow", true);
        //传值给父组件 隐藏搜索组件
        this.$emit("getSearchShow", false);
      } else {
        //如果长度不为0  不显示首页主页面  显示search页面  隐藏首页主页面
        this.submitFlag = true;
        this.searchFlag = false;
        //传值给父组件  隐藏首页主页面
        this.$emit("getContentShow", false);
        //传值给父组件 显示搜索组件
        this.$emit("getSearchShow", true);

        //每次 在input输入值 同步到store里去
        this.$store.commit("changeInputvalue", this.inputData);

        console.log(this.$store.getters.getCheckSearh);

        console.log(this.$store.state.inputValue);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.3rem;
  background-color: #e83632;
  padding-top: 0.6rem;
  z-index: 999;
  .inner {
    display: flex;
    .erweima {
      width: 0.52rem;
      height: 0.45rem;
      background: url("../../images/erweima.png") no-repeat center center;
      background-size: 0.52rem 0.45rem;
      margin: 0 0.2rem;
    }
    .input {
      width: 75%;
      height: 0.45rem;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        font-size: 0.24rem;
        color: #a9a9a9;
        border-radius: 0.24rem;
        border: 1px solid transparent;
        padding-left: 0.7rem;
      }
      .search {
        width: 0.27rem;
        height: 0.27rem;
        background: url("../../images/search.png") no-repeat center center;
        background-size: 0.27rem 0.27rem;
        position: absolute;
        left: 0.35rem;
        top: 0.1rem;
      }
      .subim-search {
        width: 0.27rem;
        height: 0.27rem;
        background: url("../../images/search.png") no-repeat center center;
        background-size: 0.27rem 0.27rem;
        position: absolute;
        right: 0.35rem;
        top: 0.1rem;
      }
    }
    .message {
      width: 0.48rem;
      height: 0.48rem;
      background: url("../../images/message.png") no-repeat center center;
      background-size: 0.48rem 0.48rem;
      margin: 0 0.2rem;
    }
  }
}
@media screen and (min-width: 320px) {
  #app .header .inner .input .search {
    top: 0.16rem;
  }
}
@media screen and (min-width: 375px) {
  #app .header .inner .input .search {
    top: 0.1rem;
  }
}
</style>
